import React, { Component } from 'react';
import Base from './base';
import { connect } from 'react-redux/es/exports';
import DigitButton from './calculator/digitButton';
import ACTIONS from './../../redux/action';
import OperationButton from './calculator/operationButton';

class Calculate extends Component {
    state = { 
        // 数字格式
        formater: Intl.NumberFormat('en-us')
    };

    format = number => {
        // 将整数小数取出来
        const [integer, decimal] = number.split('.');
        if(decimal === undefined)
            return this.state.formater.format(integer);
        return `${this.state.formater.format(integer)}.${decimal}`;
    }

    render() { 
        return (
            <React.Fragment>
                <Base>计算器</Base>
                <div style={{width:'100%'}}>
                    <div className='calculator'>
                    <div className='output'>
                        <div className='last-output'>
                            {this.format(this.props.lastOperand)}{this.props.operation}    
                        </div>
                        <div className='current-output'>
                            {this.format(this.props.currentOperand)}
                        </div>
                    </div>
                    <button onClick={this.props.clear} className='button-ce'>CE</button>
                    <button onClick={this.props.delete_digit}>Del</button>
                    <OperationButton operation={'/'} />
                    <DigitButton digit={'7'} />
                    <DigitButton digit={'8'} />
                    <DigitButton digit={'9'} />
                    <OperationButton operation={'*'} />
                    <DigitButton digit={'4'} />
                    <DigitButton digit={'5'} />
                    <DigitButton digit={'6'} />
                    <OperationButton operation={'-'} />
                    <DigitButton digit={'1'} />
                    <DigitButton digit={'2'} />
                    <DigitButton digit={'3'} />
                    <OperationButton operation={'+'} />
                    <DigitButton digit={'.'} />
                    <DigitButton digit={'0'} />
                    {/* 独占两格 */}
                    <button onClick={this.props.evaluate} className='button-equal'>=</button>
                    </div>
                </div>
                
            </React.Fragment>
        );
    }
}

// 数据传出
const mapStateToProps = (state, props) => {
    return  {
        currentOperand: state.currentOperand,
        lastOperand: state.lastOperand,
        operation: state.operation,

    }
}

//单个的键不用单独组件 直接函数
const mapDispatchToProps = {
    delete_digit: () => {
        return{
            type: ACTIONS.DELETE_DIGIT,
        }
    },
    clear: () => {
        return{
            type: ACTIONS.CLEAR,
        }
    },
    evaluate: () => {
        return{
            type: ACTIONS.EVALUATE,
        }
    }
}
 
export default connect(mapStateToProps,mapDispatchToProps)(Calculate); 